﻿<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">

<head th:replace="layout::head(${title},${desc})"></head>

<body>

<div id="main-wrapper">
    <!--导入页面头部-->
    <div th:replace="layout::header"></div>
    
    <!--Page Banner Section start-->
    <div class="page-banner-section section">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h1 class="page-banner-title">登录或注册</h1>
                    <ul class="page-breadcrumb">
                        <li><a th:href="@{/index.html}">主页</a></li>
                        <li class="active">登录或注册</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--Page Banner Section end-->

    <!--Login & Register Section start-->
    <div class="login-register-section section pt-100 pt-lg-80 pt-md-70 pt-sm-60 pt-xs-50 pb-100 pb-lg-80 pb-md-70 pb-sm-60 pb-xs-50">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-8 col-12 ml-auto mr-auto">
                    <!--操作方式选择栏-->
                    <ul class="login-register-tab-list nav">
                        <li><a class="active" href="#login-tab" data-toggle="tab">登录</a></li>
                        <li>or</li>
                        <li><a href="#register-tab" data-toggle="tab">注册</a></li>
                    </ul>
                    
                    <div class="tab-content">
                        <!--登录面板-->
                        <div id="login-tab" class="tab-pane show active">
                            <form action="#">
                                <div class="row">
                                    <div class="col-12 mb-30"><input type="text" placeholder="输入用户名" required></div>
                                    <div class="col-12 mb-30"><input type="password" placeholder="输入密码" required></div>
                                    <div class="col-12 mb-30">
                                        <ul>
                                            <li><input type="checkbox" id="login_remember" required> <label for="login_remember" class="cursor_label">记住用户和密码</label></li>
                                        </ul>
                                    </div>
                                    <div class="col-12 mb-30"><button class="btn btn3">登录</button></div>

                                    <div class="col-12 d-flex justify-content-between">
                                        <span>新用户需要到老九学堂 &nbsp; <a class="register-toggle" href="#register-tab">注册!</a></span>
                                        <span><a th:href="@{/forgot-password.html}">忘记密码?</a></span>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!--注册面板-->
                        <div id="register-tab" class="tab-pane">
                            <!--注册方式选择栏-->
                            <ul class="register-type-tab-list nav">
                                <li><a class="active" href="#phone_register" data-toggle="tab">手机号注册(推荐)</a></li>
                                <li>|</li>
                                <li><a href="#account_register" data-toggle="tab">账号注册</a></li>
                            </ul>
                            <!--注册表单面板-->
                            <form action="#">
                                <div class="row">
                                    <div class="col-12 mb-30">
                                        <div id="phone_register" class="tab-pane show active">
                                            <input class="col-12 mb-30" type="text" placeholder="手机号" required>
                                            <input class="col-6" type="text" placeholder="输入验证码" required>
                                            <button class="col-5 btn btn2">发送验证</button>
                                        </div>
                                        <div id="account_register" class="tab-pane"><input type="text" placeholder="账号" required></div>
                                    </div>
                                    <div class="col-12 mb-30"><input type="text" placeholder="真实名称" required></div>
                                    <div class="col-12 mb-30"><input type="text" placeholder="昵称" required></div>
                                    <div class="col-12 mb-30"><input type="password" placeholder="密码" required></div>
                                    <div class="col-12 mb-30"><input type="password" placeholder="确认密码" required></div>
                                    <div class="col-12 mb-30">
                                        <ul>
                                            <li><input type="checkbox" id="register_agree" required><label for="register_agree" class="cursor_label">我同意相关<a th:href="@{/#}">定义 & 条款</a></label></li>
                                        </ul>
                                    </div>
                                    <div class="col-12 mb-30">
                                        <ul>
                                            <li><input type="radio" name="account_type" id="register_normal" checked><label for="register_normal" class="cursor_label">普通用户</label></li>
                                            <li><input type="radio" name="account_type" id="register_agent"><label for="register_agent" class="cursor_label">代理人</label></li>
                                            <li><input type="radio" name="account_type" id="register_agency"><label for="register_agency" class="cursor_label">代理商</label></li>
                                        </ul>
                                    </div>
                                    <div class="col-12"><button class="btn btn3">注册</button></div>
                                </div>
                            </form >
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
    <!--Login & Register Section end-->

    <!--导入页面底部-->
    <div th:replace="layout::footer"></div>

</div>

<!-- Placed js at the end of the document so the pages load faster -->

<!-- All jquery file included here -->
<script src="http://ditu.google.cn/maps/api/js?sensor=false&libraries=geometry&v=3.22&key=AIzaSyDAq7MrCR1A2qIShmjbtLHSKjcEIEBEEwM"></script>
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/map-place.js"></script>
<script src="assets/js/main.js"></script>

</body>

</html>
